<!--  -->
<template>
<div class='app'>
  <router-view></router-view>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {

  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {

    //这里存放数据
    return {
      dialogFormVisible: false,  //发送消息框的显示隐藏
      total: 0, //数据总条数
      currentPage: 1, //分页栏当前第1页
      userData: [], //表格渲染的数据
      multipleSelection: [], //多选框数组
      page: 1, //分页获取
      pageSize: 10, //分页获取
      order: "desc", //排序方式
      sort: "id", //排序项
      MessageContent: '',  //发送消息的内容
      sendMessageId:'',       //要发送消息的用户id
      searchCon:'',          //搜索框的内容
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //清空搜索框
    clearSearch(){
      if(!this.searchCon){
        return this.$message('已经是空的啦')
      }
      this.searchCon = "";
      this.sendRequest();
    },
    //筛选搜索
    filterSearch(){

    },
    //打开发送消息框
    sendMessage(val) {
      // console.log(id);
      console.log(val);
      this.sendMessageId = val;
      this.dialogFormVisible = true;
      
    },
    //点击确认发送消息
    confirmSendMessage(){
      console.log('dialogFormVisible = false');
      console.log(this.MessageContent);
      if(!this.MessageContent){
        this.$message("请输入内容");
        return
      }else if(this.MessageContent.length > 1){
        this.$request.post(`/member/${this.sendMessageId}/message`,{
          message:this.MessageContent,
        }).then(res=>{
          console.log(res);
        })
      }
      this.MessageContent = ""
      this.dialogFormVisible = false;
    },
    //数据条数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.sendRequest();
    },
    //数据当前页
    handleCurrentChange(val) {
      this.page = val;
      this.sendRequest();
      // console.log(`当前页: ${val}`);
    },
    handleClick(row) {
      // console.log(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },
    //时间格式转换
    changeTime(time) {
      let Y, M, D, H, m, s;
      Y = time.getFullYear();
      M = time.getMonth() + 1 < 0 ? "0" + time.getMonth() + 1 : time.getMonth() + 1;
      D = time.getDate() < 0 ? "0" + time.getDate() : time.getDate();
      H = time.getHours() < 0 ? "0" + time.getHours() : time.getHours();
      m = time.getMinutes() < 0 ? "0" + time.getMinutes() : time.getMinutes();
      s = time.getSeconds() < 0 ? "0" + time.getSeconds() : time.getSeconds();
      return Y + "-" + M + "-" + D + " " + H + ":" + m + ":" + s;
    },
    //发送请求
    async sendRequest() {
      await this.$request
        .get(
          `/member?page=${this.page}&size=${this.pageSize}&sort=${this.sort}&order=${this.order}`
        )
        .then((res) => {
          console.log(JSON.parse(JSON.stringify(res)));
          // let obj = {}
          let resData = res.data;
          let userInfo = res.data.data;
          this.total = userInfo.total;
          // console.log(resData);
          // console.log(resData.data.to);
          console.log(userInfo);
          this.userData = [];
          for (let i = 0; i < userInfo.data.length; i++) {
            // for (let i = 0; i < resData.data.to; i++) {
            this.userData.push({
              id: userInfo.data[i].id,
              name: userInfo.data[i].nick_name,
              avatar: userInfo.data[i].avatar,
              created_at: this.changeTime(new Date(userInfo.data[i].created_at)),
              mobile: userInfo.data[i].mobile,
              roleName:
                userInfo.data[i].role == (null || undefined) ? "" : userInfo.data[i].role.name,
              credit1: userInfo.data[i].credit1,
              tags: userInfo.data[i].tags,
              user_remarks:
                resData.user_remarks[userInfo.data[i].id] == undefined
                  ? ""
                  : resData.user_remarks[userInfo.data[i].id].remark,
            });
          }
        });
    },
    //排序
    sortChange(val) {
      console.log(val);
      this.sort = val.prop;
      if (val.order == "descending") {
        this.order = "desc";
      } else if (val.order == "ascending") {
        this.order = "asc";
      } else {
        return;
      }
      this.sendRequest();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    this.sendRequest();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发

//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {

},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>

</style>